@import url('style');
@import url('page-list');
@import url('download');
@import url('news-list');
@import url('detail');
@import url('contact-form');
@import url('common-banner');
#page-temp{
  padding: 50 * @px1 0;
  >div{
    position: relative;
    .mobile-title{
      display: none;
      padding: 20 * @px1 0;
      table{
        tr{
          td{
            vertical-align: top;
          }
          td.title{
            padding-right: 5 * @px1;
            h2{
              font-size: 20 * @px1;
              color: @systemColor;
              font-weight: 600;
              white-space: nowrap;
              line-height: 1;
            }
            p{
              font-size: 16 * @px1;
              color: #707070;
              white-space: nowrap;
              line-height: 1;
              margin-top: 10 * @px1;
            }
          }
          td.menu-box{
            width: 100%;
            position: relative;
            >div{
              i{
                display: block;
                font-size: 20 * @px1;
                line-height: 1;
                color: @systemColor;
                cursor: pointer;
              }
              p,span{
                display: block;
                width: 100%;
                position: absolute;
                right: 0;
              }
              p{
                bottom: 8 * @px1;
                border-bottom: 2px solid #d7d7d7;
              }
              span{
                padding-left: 50 * @px1;
                bottom: 13 * @px1;
              }
              span:after{
                border-bottom: 1px solid #f0f0f0;
                content: "";
                display: block;
              }
            }
          }
        }
      }
    }
    .page-left{
      position: absolute;
      left: 0;
      top: 0;
      >span{
        i{
          display: none;
        }
        
      }
    }
    .page-right{
      min-height: 80vh;
      padding-left: 240 * @px1;
      .page-title-box{
        background-color: @systemColor;
        h2{
          color: white;
          font-size: 16 * @px1;
          line-height: 1;
          padding: 10 * @px1 0;
          padding-left: 25 * @px1;
        }
      }
      .rich-text-box{
        margin-top: 20 * @px1;
        strong{
          font-weight: bold;
          span{
            font-weight: bold;
          }
        }
        img{
          max-width: 100%;
          height: auto;
          margin-left: -43 * @px1;
        }
      }
    }
  }
}

@media (max-width: 800px) {
  .page-box{
    min-height: calc(100vh - 206 * @px1);
  }
  #page-temp{
    padding-top: 0;
    >div{
      .mobile-title{
        display: block;
      }
      .page-left{
        position: fixed;
        width: 100%;
        right: 0;
        top: 0;
        transform: translateX(100%);
        transition: transform 0.2s linear;
        height: 100%;
        z-index: 20;
        padding-left: 50 * @px1;
        overflow-y: scroll;
        >span{
          display: block;
          position: fixed;
          height: 100%;
          top: 0;
          left: 0;
          padding-top: 80 * @px1;
          padding-left: 8 * @px1;
          width: 50 * @px1;
          text-align: left;
          i{
            display: inline-block;
            font-size: 26 * @px1;
            height: 100%;
            color: white;
            opacity: 0.7;
          }
        }
        #page-list{
          width: 100%;
          min-height: 100vh;
          background-color: #eeeeee;
          >div{
            .page-list-top{
              background-color: transparent;
              h2{
                text-align: center;
                color: #333333;
              }
              p{
                display: none;
              }
            }
            ul{
              li{
                border-bottom-color: #e6e9e9;
                a,span{
                  p{
                    padding-left: 30 * @px1;
                    font-size: 18 * @px1;
                    color: #333333;
                    i.angle{
                      display: none;
                    }
                    i.point{
                      display: block;
                      font-size: 30 * @px1;
                      color: #666666;
                    }
                  }
                }
              }
            }
          }
        }
      }
      .page-right{
        min-height: 0;
        padding-left: 0;
        .page-title-box{
          background-color: white;
          text-align: center;
          padding: 15 * @px1 0;
          border-bottom: 1px solid #fcfcfc;
          margin-bottom: 20 * @px1;
          h2{
            color: black;
            font-size: 22 * @px1;
            font-weight: 600;
          }
        }
      }
    }
  }
  #page-temp{
    >div{
      .page-left.list-show{
        transform: translateX(0);
        background-color: rgba(0, 0, 0, 0.5);
      }
    }
  }
}